<template>
  <el-form inline label-width="auto" size="medium" class="search-form" v-loading.fullscreen.lock="loading">
    <template v-if="user.branchId===1">
      <el-form-item label="所属总店">
        <el-select filterable clearable v-model="search.branchId" class="search-input" :disabled="inputLoading">
          <el-option v-for="branch in branchList" :key="branch.branchId" :value="branch.branchId" :label="branch.branchName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属分店">
        <el-select filterable clearable v-model="search.partnerId" class="search-input" :disabled="inputLoading">
          <el-option v-for="partner in partnerList" :key="partner.id" :value="partner.id" :label="partner.name">
          </el-option>
        </el-select>
      </el-form-item>
    </template>

    <el-form-item label="订单号">
      <el-input v-model="search.orderNoMain" class="search-input"></el-input>
    </el-form-item>
    <el-form-item label="购买者">
      <el-input v-model="search.buyerName" class="search-input"></el-input>
    </el-form-item>
    <el-form-item label="联系方式">
      <el-input v-model="search.buyerPhone" class="search-input"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select clearable v-model="search.status" class="search-input">
        <el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="下单时间">
      <el-date-picker clearable v-model="search.startTime" class="time-input" type="datetime" value-format="timestamp" format="yyyy-MM-dd HH:mm:ss"
        :editable="false">
      </el-date-picker>
      <span>-</span>
      <el-date-picker clearable v-model="search.endTime" class="time-input" type="datetime" value-format="timestamp" format="yyyy-MM-dd HH:mm:ss"
        :editable="false">
      </el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script>
  import PermissionApi from 'services/permissionApi';

  export default {
    props: {
      search: {
        type: Object,
        required: true
      },
      user: {
        type: Object,
        required: true
      },
      dropdownOption: {
        type: Object,
        default () {
          return {};
        }
      }
    },

    watch: {
      "search.branchId"() {
        this.branchChange();
      }
    },

    data() {
      return {
        loading: false,
        inputLoading: false,
        branchList: [],
        partnerList: [],
        statusList: this.i18n.getDropDown('orderMgr.status', [-1, 0, 1, 2, 3, 4])
      };
    },

    created() {
      if (this.user.branchId !== 1) {
        return;
      }

      this.loading = true;
      this.setBranchList().then(() => {
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    methods: {
      setBranchList() {
        let dropdownOption = this.dropdownOption;
        let branchList = dropdownOption.branchList;
        if (branchList !== undefined) {
          this.branchList = branchList;
          return Promise.resolve(branchList);
        }

        return PermissionApi.getBranchList().then(branchList => {
          this.branchList = branchList;
          dropdownOption.branchList = branchList;
          return branchList;
        });
      },

      setPartnerList() {
        let branchId = this.search.branchId;
        if (branchId === '') {
          this.partnerList = [];
          return Promise.resolve([]);
        }
        return PermissionApi.getPartners(branchId).then(partnerList => {
          this.partnerList = partnerList;
          return partnerList;
        });
      },

      branchChange() {
        this.inputLoading = true;
        this.setPartnerList().then(() => {
          let partnerList = this.partnerList;
          let partnerId = this.search.partnerId;
          if (partnerId !== '') {
            let partner = _.find(partnerList, {
              id: partnerId
            });
            if (partner === undefined) {
              this.search.partnerId = '';
            }
          }
          this.inputLoading = false;
        }).catch(() => {
          this.inputLoading = false;
        });
      }
    }
  };

</script>

<style lang="scss" scoped>
  @import '~viewStyle/searchForm';

  .search-form {
    .time-input {
      width: 200px;
    }

    .search-input {
      width: 175px;
    }
  }

</style>
